<template>
  <section>
    <section class="flex justify-between items-center">
      <section class="flex items-center gap-x-1">
        <i-icons-exclamation-circle />
        <span class="text-sm/22px text-4 whitespace-nowrap"
          >层级为 L2 的节点，安全配置不生效。</span
        >
      </section>
      <a-input-search
        v-model="searchKey"
        allow-clear
        class="!w-90"
        placeholder="请输入节点名称/节点 IP" />
    </section>
    <a-tree
      v-if="originTreeData.length && treeData.length"
      v-model:checked-keys="target"
      :data="treeData"
      default-expand-all
      :field-names="fieldNames"
      checked-strategy="child"
      class="my-6"
      checkable
      multiple
      @select="onSelect">
      <template #title="nodeData">
        <template v-if="getMatchIndex(nodeData?.name) < 0">{{
          nodeData?.name
        }}</template>
        <span v-else>
          {{ nodeData?.name?.substr(0, getMatchIndex(nodeData?.name)) }}
          <span style="color: #165dff">
            {{
              nodeData?.name?.substr(
                getMatchIndex(nodeData?.name),
                searchKey.length
              )
            }} </span
          >{{
            nodeData?.name?.substr(
              getMatchIndex(nodeData?.name) + searchKey.length
            )
          }}
        </span>
      </template>
      <template #icon="{ node }">
        <i-icons-l1-icon v-if="node.level && node.level === 1" />
        <i-icons-l2-icon v-else-if="node.level && node.level === 2" />
      </template>
    </a-tree>
    <div v-else class="empty-data">
      <i-icons-deploy-empty />
      <span class="text-5 text-sm/22px">暂无数据</span>
    </div>
  </section>
</template>
<script lang="ts" setup>
import type { TreeNodeData } from '@arco-design/web-vue/es/tree/interface'

const originTreeData = defineModel('data', {
  default: [],
  required: true
})
const target = defineModel<string[]>('target', {
  default: [],
  required: true
})
const searchKey = ref('')
const fieldNames = { key: 'id', title: 'name', children: 'children' }
const treeData = computed(() => {
  if (!searchKey.value) return originTreeData.value
  return searchData(searchKey.value)
})
function searchData(keyword: string) {
  const loop = (data) => {
    const result = []
    data.forEach((item) => {
      if (item.name?.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
        result.push({ ...item })
      } else if (item.children) {
        const filterData = loop(item.children)
        if (filterData.length) {
          result.push({
            ...item,
            children: filterData
          })
        }
      }
    })
    return result
  }

  return loop(originTreeData.value)
}
const onSelect = (
  _selectedKeys: Array<string | number>,
  info: {
    selected?: boolean
    selectedNodes: TreeNodeData[]
    node?: TreeNodeData
    e?: Event
  }
) => {
  if (!info?.node?.children?.length) {
    if (target.value.includes(info?.node?.id as string)) {
      target.value = target.value.filter((item) => item !== info?.node?.id)
    } else {
      target.value = [...target.value, info?.node?.id as string]
    }
  } else {
    if (info?.selected) {
      target.value = [
        ...target.value,
        ...info.node.children.map((item) => item.id)
      ]
    } else {
      target.value = target.value.filter((item) => {
        return !info?.node?.children?.some((child) => child?.id === item)
      })
    }
  }
}
function getMatchIndex(title: string) {
  if (!searchKey.value) return -1
  return title.toLowerCase().indexOf(searchKey.value.toLowerCase())
}
</script>

<style lang="less" scoped>
:deep(.arco-tree) {
  .arco-tree-node {
    .arco-checkbox {
      @apply h-22px;
    }
  }
  .arco-tree-node-title {
    @apply text-2 h-22px !text-sm/22px select-none flex !items-center;
    .arco-tree-node-icon {
      @apply leading-22px flex-center;
    }
  }
  [data-level='0'] {
    @apply !w-full pb-4;
    &:not(:first-child) {
      @apply !pt-6;
    }
    .arco-tree-node-title > .arco-tree-node-icon {
      @apply !mr-0;
    }
    .arco-tree-node-switcher {
      @apply !h-22px !leading-22px;
      &:has(.arco-icon) {
        @apply !text-4;
      }
    }
  }
  .arco-tree-node-switcher {
    @apply !h-22px !leading-22px;
    &:has(.arco-icon) {
      @apply !text-4;
    }
  }
  .arco-tree-node-is-leaf {
    @apply !min-w-320px  float-left !leading-22px pb-4;
    .arco-tree-node-indent > .arco-tree-node-indent-block {
      @apply mr-14px;
    }
    .arco-tree-node-title > .arco-tree-node-title-text {
      @apply truncate !max-w-350px select-none;
    }
  }
}
:deep(.arco-input-search .arco-icon-hover) {
  @apply text-7;
}
.empty-data {
  @apply flex flex-col justify-center items-center w-full h-full min-h-500px bg-white;
  // height: calc(100vh - 312px);
}
</style>
